import { useState } from 'react';
import { Modal } from 'antd';
import { Link } from 'react-router-dom';
// 引入design样式
import '../../pages/Home/css/design/design.scss'
function Design() {
  const basicContent = [
    {
      img: '/public/ic1.png',
      title: 'H5',
      msg: '零基础快速制作翻页h5'
    },
    {
      img: '/public/ic2.png',
      title: '表单',
      msg: '零基础快速制作翻页h5'
    },
    {
      img: '/public/ic3.png',
      title: '长页',
      msg: '零基础快速制作翻页h5'
    },
    {
      img: '/public/ic4.png',
      title: 'H5',
      msg: '零基础快速制作翻页h5'
    },
    {
      img: '/public/ic5.png',
      title: 'H5',
      msg: '零基础快速制作翻页h5'
    }, {
      img: '/public/ic6.png',
      title: 'H5',
      msg: '零基础快速制作翻页h5'
    },
    {
      img: '/public/ic7.png',
      title: 'H5',
      msg: '零基础快速制作翻页h5'
    },
    {
      img: '/public/ic8.png',
      title: 'H5',
      msg: '零基础快速制作翻页h5'
    }

  ]
  const [isModalOpen, setIsModalOpen] = useState(true);

  const handleOk = () => {
    setIsModalOpen(false);
  }

  const handleCancel = () => {
    setIsModalOpen(false);
  }

  return (
    <div>
      <Modal width="50%" title="创建作品" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <div className='basicTemplate' style={{ height: '300px' }}>
          {
            basicContent.map((item: any, index: any) => (
              <div className="basic" key={index}>
                <p><img src={item.img} alt="" /></p>
                <p>{item.title}</p>
                <p>{item.msg}</p>
                <div className="basic_masking">
                  <Link to="/dragDrop">
                    <button>空白创建</button>
                  </Link>
                  <button style={{ background: '#1261ff', color: '#fff' }} >模板创建</button>
                </div>
              </div>
            ))
          }
        </div>
      </Modal>
    </div>
  )
}

export default Design
